<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function f1(){
                alert(document.getElementById("s1").selectedIndex);
            }

            function f2(index){

                alert(index);

            }

            function f3(){
                var s1=document.getElementById("s1");

                var options=s1.options;

                console.log(options);

                console.log(options.selectedIndex);

                for(var i=0;i<options.length;i++){
                    var option=options[i];
                    console.log(option.innerHTML+" "+option.text+" "+option.value);
                    // option.innerHTML="<h1>Hello</h1>";
                    option.text="<h1>Hello</h1>";
                }
            }

            function f4(){
                var s1=document.getElementById("s1");

                // var op=document.createElement("option");
                // op.value="4";
                // op.innerHTML="ddd";
                // s1.appendChild(op);

                // s1.innerHTML=s1.innerHTML+"<option value='4'>ddd</option>";

                var op=new Option("ddd","4");

                s1.options[s1.length]=op;


            }

            function f5(){
                var s1=document.getElementById("s1");

                console.log("11111 "+s1.options.length);

                s1.options[1]=null;

                console.log("22222 "+s1.options.length);

            }

            function f6(){

                var s1=document.getElementById("s1");

                s1.options.length=0;
            }
        </script>
    </head>
    <body>


        <select id="s1" onchange="f2(this.selectedIndex);">
            <option value="1">aaa</option>
            <option value="2">bbb</option>
            <option value="3">ccc</option>
        </select>

        <a href="javascript:;" onclick="f6();">test</a>
    </body>
</html>